<!-- templates/remote.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>远程控制中...</title>
    <style>
        body { margin:0; overflow:hidden; background:#000; }
        canvas { display:block; width:100vw; height:100vh; cursor:none; }
        #status {
            position:fixed; top:10px; left:10px;
            color:white; font:14px sans-serif;
            background:rgba(0,0,0,0.6); padding:5px 10px;
        }
        #back {
            position:fixed; top:10px; right:10px;
        }
        #back a {
            color:white; text-decoration:none;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div id="status">正在连接...</div>
    <div id="back"><a href="/">← 返回</a></div>

    <!-- Socket.IO Client -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
    <script>
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        const status = document.getElementById("status");

        function resize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        window.addEventListener("resize", resize);
        resize();

        // 从 Flask 模板注入变量
        const SERVER_URL = "{{ server_url }}";  // e.g., http://192.168.1.100:5000
        const USERNAME = "{{ username }}";
        const PASSWORD = "{{ password }}";

        // 构造 WebSocket URL
        const wsHost = SERVER_URL.replace("http://", "").replace("https://", "");
        const socket = io(`${SERVER_URL}`, {
            path: "/socket.io",
            query: {
                Username: USERNAME,
                Password: PASSWORD
            },
            transports: ['websocket']
        });

        socket.on("connect", () => {
            status.textContent = "已连接，等待画面...";
        });

        socket.on("frame", (data) => {
            if (typeof data !== "object" || !("type" in data)) {
                const blob = new Blob([data], { type: "image/jpeg" });
                const url = URL.createObjectURL(blob);
                const img = new Image();
                img.onload = () => {
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                    URL.revokeObjectURL(url);
                };
                img.src = url;
            }
        });

        socket.on("disconnect", () => {
            status.textContent = "已断开";
        });

        socket.on("connect_error", (err) => {
            status.textContent = "连接失败: " + err.message;
            console.error("连接错误:", err);
        });

        // 鼠标事件
        canvas.addEventListener("mousemove", (e) => {
            const x = e.clientX / canvas.width;
            const y = e.clientY / canvas.height;
            socket.emit("mouse", { action: "move", x, y });
        });

        canvas.addEventListener("mousedown", (e) => {
            const x = e.clientX / canvas.width;
            const y = e.clientY / canvas.height;
            const button = e.button === 0 ? "left" : "right";
            socket.emit("mouse", { action: "down", x, y, button });
        });

        canvas.addEventListener("mouseup", (e) => {
            const x = e.clientX / canvas.width;
            const y = e.clientY / canvas.height;
            const button = e.button === 0 ? "left" : "right";
            socket.emit("mouse", { action: "up", x, y, button });
        });

        canvas.addEventListener("click", (e) => {
            const x = e.clientX / canvas.width;
            const y = e.clientY / canvas.height;
            const button = e.button === 0 ? "left" : "right";
            socket.emit("mouse", { action: "click", x, y, button });
        });

        // 键盘事件
        window.addEventListener("keydown", (e) => {
            socket.emit("key", { key: e.key, pressed: true });
            e.preventDefault();
        });

        window.addEventListener("keyup", (e) => {
            socket.emit("key", { key: e.key, pressed: false });
            e.preventDefault();
        });
    </script>
</body>
</html>